package com.devo.icecream.ui.order

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.devo.icecream.R
import com.devo.icecream.data.CouponBean
import com.devo.icecream.data.Pay
import com.devo.icecream.ui.theme.Grey
import com.devo.icecream.ui.theme.Main
import com.devo.icecream.utils.noRippleClickable

/**
 * 等待支付界面
 * @param pay Pay
 * @param isFinish Boolean
 * @param imageQR String
 * @param onSwitchPayType Function0<Unit>?
 */
@Composable
fun WaitPayLayout(
    pay: Pay = Pay.WX,
    isFinish: Boolean = true,
    imageQR: ImageBitmap? = null,
    price: Float = 0f,
    coupon: CouponBean? = null,
    onCouponChanged: (code: String) -> Unit = {},
    onSwitchPayType: (() -> Unit)? = null
) {

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(32.dp)
    ) {


        CouponLayout(coupon, onCouponChanged)

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {


            Text(text = "扫描二维码支付", fontSize = MaterialTheme.typography.h2.fontSize)

            Spacer(modifier = Modifier.height(16.dp))

            Box(
                modifier = Modifier
                    .background(Grey)
                    .fillMaxWidth(0.4f)
                    .aspectRatio(1f)
            ) {
                imageQR?.let {
                    Image(
                        it,
                        modifier = Modifier.fillMaxSize(),
                        contentDescription = "",
                        contentScale = ContentScale.FillBounds,
                    )
                }

                if (isFinish) {
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(Color.Black.copy(alpha = 0.56f))
                    ) {

                        Image(
                            modifier = Modifier
                                .align(Alignment.Center)
                                .size(48.dp),
                            painter = painterResource(id = R.mipmap.pay_ok),
                            contentDescription = ""
                        )

                    }
                }

            }

            Spacer(modifier = Modifier.height(8.dp))


            Text(
                text = buildAnnotatedString {
                    withStyle(
                        SpanStyle(
                            fontSize = MaterialTheme.typography.h2.fontSize,
                            color = Main
                        )
                    ) {
                        append("￥")
                    }
                    withStyle(
                        SpanStyle(
                            fontSize = MaterialTheme.typography.h1.fontSize,
                            fontWeight = FontWeight.Bold,
                            color = Main
                        )
                    ) {
                        append("%.02f".format(price))
                    }
                },
                style = MaterialTheme.typography.h1.copy(color = Main)
            )

            val ids = if (pay == Pay.WX) {
                R.mipmap.img_pay_wx
            } else {
                R.mipmap.img_pay_ali
            }

            Image(
                modifier = Modifier
                    .fillMaxWidth(0.2f)
                    .aspectRatio(1280 / 491f),
                painter = painterResource(id = ids),
                contentScale = ContentScale.FillBounds,
                contentDescription = "way of pay"
            )

            Spacer(modifier = Modifier.height(16.dp))

            Text(
                modifier = Modifier
                    .padding(vertical = 16.dp)
                    .noRippleClickable { onSwitchPayType?.invoke() },
                text = "换一种支付方式",
                style = MaterialTheme.typography.body1.copy(color = Main)
            )

        }

    }
}

@Composable
@Preview()
fun CouponLayout(coupon: CouponBean?, onCouponChanged: (code: String) -> Unit = {}) {

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Max),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        val text = remember {
            mutableStateOf("")
        }

        Text(
            modifier = Modifier.weight(1f),
            text = "代金券",
            style = MaterialTheme.typography.h2.copy(textAlign = TextAlign.Start)
        )

        if (coupon != null) {

            Column(
                modifier = Modifier.weight(1f),
                horizontalAlignment = Alignment.End,
                verticalArrangement = Arrangement.SpaceAround
            ) {
                Text(text = coupon.name, fontSize = MaterialTheme.typography.subtitle1.fontSize)
                Text(
                    text = "-¥ %.02f".format(coupon.price),
                    style = MaterialTheme.typography.subtitle1.copy(color = Main)
                )
            }


        } else {

            val focusManager = LocalFocusManager.current
            TextField(
                modifier = Modifier
                    .weight(1f)
                    .align(Alignment.CenterVertically),
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.Transparent,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    disabledIndicatorColor = Color.Transparent
                ),
                value = text.value,
                placeholder = {
                    Text(
                        modifier = Modifier
                            .align(Alignment.CenterVertically)
                            .fillMaxSize(),
                        text = "请输入券码",
                        fontSize = MaterialTheme.typography.h5.fontSize,
                        textAlign = TextAlign.End
                    )
                },
                maxLines = 1,
                keyboardActions = KeyboardActions {
                    focusManager.clearFocus(true)
                    onCouponChanged.invoke(text.value)
                },
                keyboardOptions = KeyboardOptions.Default.copy(
                    imeAction = ImeAction.Done
                ),
                textStyle = MaterialTheme.typography.body1.copy(textAlign = TextAlign.End),
                onValueChange = {
                    text.value = it
                },
                trailingIcon = {
                    Button(
                        enabled = text.value.isNotEmpty(),
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = Main,
                            contentColor = Color.White,
                            disabledContentColor = Color.Black.copy(alpha = 0.45f),
                        ),
                        modifier = Modifier
                            .clip(RoundedCornerShape(50))
                            .padding(vertical = 4.dp, horizontal = 8.dp),
                        onClick = { onCouponChanged.invoke(text.value) },
                    ) {
                        Text(fontSize = 22.sp, text = "确认")
                    }
                }
            )

        }

    }
}

/**
 * 支付按钮
 * @param pay Pay
 * @param onClick Function0<Unit>
 */
@Composable
fun PayButton(pay: Pay = Pay.ALI, onClick: () -> Unit) {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .wrapContentWidth()
            .clip(RoundedCornerShape(16.dp))
            .background(Main)
            .padding(vertical = 12.dp, horizontal = 16.dp)
            .noRippleClickable { onClick() },
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = pay.label,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.h2.copy(color = Color.White),
        )
    }

}